import React, { useEffect, useState, useCallback } from 'react'
import { postAccOverallApprove, getAccOverallSuOrAc } from '../../../../financialApi'
import { getSysUserSelected } from '../../../../../../Api/listUrl'
import { Button, message, Space, Modal, Radio, Form, Input, Select } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { TextArea } = Input;
const { confirm } = Modal;
const { Option } = Select;

/**
 * @description: 待办事项-待审批中操作
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-07-30） 添加审批下发人
 */

const AllTodoAction = ({ serialNo, taskId, taskName, listFun }) => {
    const [form] = Form.useForm()
    const { validateFields, resetFields } = form
    const [isModalVisible, setIsModalVisible] = useState(false)
    const [userList, setUserList] = useState([])
    const userFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysUserSelected()
                if (code === '20000') {
                    setUserList(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        userFun()
    }, [userFun])
    //显示审批modal
    const handleApprove = () => {
        setIsModalVisible(true)
    }
    //审批OK
    const handleOk = () => {
        validateFields().then(values => {
            values.serialNo = serialNo
            values.taskId = taskId
            if (taskName === '最终审批中') { //最后一步没有选人：后台需要当前登录人的id
                values.appRover = sessionStorage.getItem('userId')
            }
            ; (async () => {
                const { code, msg } = await postAccOverallApprove(values);
                if (code === '20000') {
                    resetFields()
                    message.success('审批提交成功！')
                    listFun()
                    setIsModalVisible(false);
                } else {
                    message.error(msg)
                }
            })()
        })
    };
    //modal 取消
    const handleCancel = () => {
        resetFields();
        setIsModalVisible(false);
    };
    //挂起
    const handleHangUp = () => {
        confirm({
            title: '确定要挂起当前审批吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                const parames = {
                    isAct: true,
                    serialNo
                }
                    ; (async () => {
                        const { code, msg } = await getAccOverallSuOrAc(parames)
                        if (code === '20000') {
                            listFun()
                            message.success('挂起成功！')
                        } else {
                            message.error(msg)
                        }
                    })()
            }
        });
    }
    return <Space size="middle">
        <Button type='primary' onClick={() => handleApprove()}>审批</Button>
        <Button type='primary' onClick={() => handleHangUp()} >挂起</Button>
        <Modal title="审批" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                form={form}
            >

                <Form.Item
                    label="审批结果"
                    name="examine"
                    rules={[{ required: true, message: '是否同意审批!' }]}
                >
                    <Radio.Group>
                        <Radio value={0}>同意</Radio>
                        <Radio value={1}>驳回</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    label="审批意见"
                    name="comment"
                    rules={[{ required: true, message: '请输入审批意见!' }]}
                >
                    <TextArea />
                </Form.Item>
                {
                    taskName === "部门审批中" ? <Form.Item
                        label="财务审批"
                        name="appRover"
                        rules={[{ required: true, message: '请选择财务审批人员!' }]}
                    >
                        <Select>
                            {
                                userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item> : null
                }
                {
                    taskName === "财务审批中" ? <Form.Item
                        label="最终审批"
                        name="appRover"
                        rules={[{ required: true, message: '请选择最终审批人员!' }]}
                    >
                        <Select>
                            {
                                userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item> : null
                }
            </Form>
        </Modal>
    </Space>
}

export default AllTodoAction